<template>
  <el-container class="home-container">
    <!-- 页面主体区域 -->
    <el-header>
    <el-menu
      router
      :default-active="activePath"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      style="display: flex"
      active-text-color="#FFFACD">
      <el-menu-item
        style="min-width: 11.1%"
        :index="item.id + ''" v-for="item in menuList" :route="{path:item.path}" :key="item.id" @click="activePath=item.id">
        <template slot="title">
          <!-- 图标 --><!-- 文本 -->
          <span>{{item.name}}</span>
        </template>

      </el-menu-item>

    </el-menu>
    </el-header>
    <el-main>
        <!-- 路由占位符 -->
        <router-view class="tables"></router-view>
    </el-main>
  </el-container>
</template>

<script>
import Mamp from '@/views/mamp'
import Alerm from '@/views/alerm'
import Amplitude from '@/views/amplitude'
import Delay from '@/views/delay'
import BreakDetail from '@/views/break-detail'
import Sample from '@/views/sample'
import Offline from '@/views/offline'
import Avail from '@/views/avail'
export default {
  data () {
    return {
      // 左侧菜单数据

      menuList: [
        {
          id: '1',
          name: '延时次数超标',
          path: '/delay'
        },
        {
          id: '2',
          name: '波形异常数量',
          path: '/mamp'
        },
        {
          id: '3',
          name: '采样率变化超标',
          path: '/sample'
        },
        {
          id: '4',
          name: '下线站点情况',
          path: '/offline'
        },
        {
          id: '5',
          name: '实时告警超标',
          path: '/alerm'
        },
        {
          id: '6',
          name: '延时幅值超标',
          path: '/amplitude'
        },
        {
          id: '7',
          name: '断记详细信息',
          path: '/breakdetail'
        },
        {
          id: '8',
          name: '可用率',
          path: '/avail'
        },
        {
          id: '9',
          name: '综合信息',
          path: '/information'
        }
      ],

      // 被激活的链接地址
      activePath: '',
      username: ''
    }
  },
  created () {
    let now = new Date()
    let nowTemp = now.getTime() // 获取当前时间戳
    let hour = now.getHours()
    let nextTemp = this.getNextTemp(hour) // 获取下一个导出时间的时间戳
    let residueTemp = nextTemp - nowTemp
    console.log(residueTemp)
    setInterval(() => {
      now = new Date()
      nowTemp = now.getTime() // 获取当前时间戳
      hour = now.getHours()
      nextTemp = this.getNextTemp(hour) // 获取下一个导出时间的时间戳
      console.log(nextTemp)
      // clearInterval(timer)
      residueTemp = nextTemp - nowTemp
      // 所有页面导出的方法
      Mamp.methods.exportDefaultExcel()
      Alerm.methods.exportDefaultExcel()
      Amplitude.methods.exportDefaultExcel()
      Amplitude.methods.exportDefaultWord()
      Delay.methods.exportDefaultExcel()
      Delay.methods.exportDefaultWord()
      BreakDetail.methods.exportDefaultExcel()
      BreakDetail.methods.exportDefaultWord()
      Sample.methods.exportDefaultExcel()
      Offline.methods.exportDefaultExcel()
      Avail.methods.exportDefaultExcel()
      Avail.methods.exportDefaultWord()
    }, residueTemp)
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    getNextTemp (hour) {
      if (hour < 5) {
        const nextTemp = new Date(new Date().toLocaleDateString()).getTime() + 5 * 60 * 60 * 1000
        return nextTemp
      } else if (hour < 13) {
        const nextTemp = new Date(new Date().toLocaleDateString()).getTime() + 13 * 60 * 60 * 1000
        return nextTemp
      } else if (hour < 21) {
        const nextTemp = new Date(new Date().toLocaleDateString()).getTime() + 21 * 60 * 60 * 1000
        return nextTemp
      } else {
        const nextTemp = new Date(new Date().toLocaleDateString()).getTime() + 29 * 60 * 60 * 1000 // 第二天五点的时间戳
        return nextTemp
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header{
  padding: 0;
}
.el-main {
  overflow: hidden;

}

.iconfont {
  margin-right: 10px;
}

.tables{
  padding: 0 20px 0 20px;
}

</style>
